﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--模态遮罩-->
<div class="mask" id="bg-mask"></div>
<%--提问模型--%>
<div class="upon-mask" id="ask-mask">
    <h3>
        <span>提问</span>
        <span class="close-mask" onclick="closeMask();">×</span>
    </h3>
    <form id="askForm" style="width: 92%;padding: 20px;">
        <input id="mask_title" type="text" name="title" placeholder="一句话描述你的问题">
        <div>问题详述：</div>
        <textarea id="mask_content" name="content" style="height: 120px;resize: none"></textarea>
        <div>板块分类：</div>
        <select id="mask_topic" name="topics" style="width: 498px"></select>
        <%--<input id="topicNameString" type="text" name="topics">--%>
        <button type="button" onclick="askQuestion();">发布</button>
    </form>
</div>
<%--用户信息模型--%>
<div class="upon-mask" id="userInfo-mask">
    <h3 style="margin-top: 0">
        <span>用户资料</span>
        <span onclick="closeMask();" class="close-mask">×</span>
    </h3>
    <div style="width: 92%;padding: 20px;">
        <div>
            <div style="display: inline-block;width: 25%;">
                <img id="mask_userAvatar" src="">
            </div>
            <div style="width: 60%;display: inline-block;">
                <div id="mask_userName" style="padding-top: 5px;font-size: 26px"></div>
                <div id="mask_email" style="font-size: 18px"></div>
            </div>
            <div style="width: 10%;display: inline-block;">
                <button id="mask_follow_button">关注</button>
            </div>
        </div>
        <div style="height: 10px;"></div>
        <div style="font-size: 18px;">角色：<span id="mask_role"></span></div>
        <div style="font-size: 18px;">加入时间：<span id="mask_joinTime"></span></div>
        <div style="font-size: 18px;">简介：<span id="mask_simpleDesc"></span></div>
        <div style="height: 10px;"></div>
        <div class="row">
            <div class="col-md-6" style="font-size: 18px;">
                职业：<span id="mask_career"></span>
            </div>
            <div class="col-md-6" style="font-size: 18px;">
                地址：<span id="mask_address"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="font-size: 18px;">
                自我介绍：<span id="mask_full_desc"></span>
            </div>
        </div>
        <div style="font-size: 18px;">空间访问量：<span id="mask_scanedCount"></span> 次</div>


    </div>

</div>

<script>

    /* 提问处理 */
    function askQuestion() {
        var title = $("#mask_title").val();
        var content = $("#mask_content").val();
        var topic = $("#mask_topic").val();

        if (title.trim() === "" || content.trim === "" || topic.trim() === "") {
            alert("请将问题填写完整再发布");
            return;
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/ques/ask",
            type: "post",
            data: {
                "title": title,
                "content": content,
                "topicId": topic,
                "userId": $.cookie("id"),
                "time": new Date().getTime()
            },
            success: function (response) {
                if (response.state === 0) {
                    alert("提交成功");
                    window.location.href = "${pageContext.request.contextPath}/ques/" + response.data;
                } else {
                    alert("出现了错误...");
                }
            }
        });
    }

    //弹出提问框
    function showAskMask() {
        //为提问窗口获取问题分类下拉框
        $.ajax("${pageContext.request.contextPath}/topic/topicList", {
            success: function (response) {
                //初始化
                var topicElem = $("#mask_topic");
                topicElem.html('<option value="">请选择</option>');
                response.data.forEach(function (topic) {
                    //遍历添加分类
                    topicElem.append('<option value="' + topic.id + '">' + topic.name + '</option>');
                })
            }
        });
        $("#bg-mask").show();
        $("#ask-mask").show();
    }

    //弹出用户信息框
    function showUserMask(id) {
        $("#bg-mask").show();
        $("#userInfo-mask").show();

        var followButton = $("#mask_follow_button");
        //如果显示的信息是用户自己则隐藏关注按钮
        if ($.cookie("id") === id.toString()) {
            followButton.hide();
        }
        $.ajax("${pageContext.request.contextPath}/user/userInfo", {
            data: {"userId": id}, //请求参数
            success: function (response) { //执行成功后的回调函数
                $("#mask_userAvatar").attr("src", response.user.avatarUrl);
                $("#mask_userName").text(response.user.name);
                $("#mask_email").text(response.user.email);
                $("#mask_role").text(CON_ROLE[response.user.role]);
                var joinTime = computeDifferTime(response.user.time);
                $("#mask_joinTime").text(joinTime);
                $("#mask_simpleDesc").text(response.user.simDesc);
                $("#mask_career").text(response.user.career);
                $("#mask_address").text(response.user.address);
                $("#mask_full_desc").text(response.user.fullDesc);
                $("#mask_scanedCount").text(response.user.scannedCount);

                //关注按钮处理逻辑
                var url = "";
                if (response.followedStatus) {
                    followButton.text("取消关注");
                    url = "${pageContext.request.contextPath}/follow/remove";
                } else {
                    followButton.text("关注");
                    url = "${pageContext.request.contextPath}/follow/add";
                }
                followButton.click(function () {
                    $.ajax(url, {
                        data: {
                            "fromId": $.cookie("id"),
                            "toId": id,
                            "time": new Date().getTime()
                        },
                        success: function () {
                            window.location.reload();
                        }

                    });
                });

            }
        });

    }


    // 关闭弹窗
    function closeMask() {
        $("#bg-mask").hide();
        $("#ask-mask").hide();
        $("#userInfo-mask").hide();
    }

    //计算已过时间
    function computeDifferTime(startTime) {
        var differTime = new Date().getTime() - parseInt(startTime);
        var day = Math.floor(differTime / (24 * 60 * 60 * 1000));
        if (day > 0) return day + '天前';
        var hours = Math.floor(differTime / (60 * 60 * 1000));
        if (hours > 0) return hours + '小时前';
        var minutes = Math.floor(differTime / (60 * 1000));
        if (minutes > 0) return minutes + '分钟前';
        var seconds = Math.floor(differTime / 1000);
        return seconds + '秒前';
    }


</script>
